import Base from "./Base";
import Progress from "./Progress";
import { EventNames, Props } from "src/types/shape";
import Scene from "./Scene";
import VideoControll from "./VideoControll";

export default class extends Base {
  video!: HTMLVideoElement
  progress!: Progress
  controll!: VideoControll
  isActive: boolean = false
  timer: any = 0
  scene: Scene
  readonly toolsHeight: number = 60
  constructor(scene: Scene) {
    super()
    this.scene = scene
    this.props.width = 500
    this.props.height = 500
    this.props.x = 300
    this.props.y = 300

    this.getResources()
    this.init()
  }
  getResources() {
    const rect = this.scene.domElement.getBoundingClientRect()

    this.video = document.createElement('video')
    this.video.controls = true
    this.video.style.position = 'absolute'
    this.video.style.top = rect.top + this.props.x - this.props.height / 2 + 'px'
    // this.video.style.left = rect.left + this.props.y - this.props.width / 2 + 'px'
    this.video.style.transformOrigin = 'center center'
    // this.video.setAttribute('crossOrigin', 'anonymous'); // 处理跨域
    this.video.setAttribute('preload', 'auto');
    this.video.setAttribute('controls', 'true');
    this.video.setAttribute('width', this.props.width.toString());
    this.video.setAttribute('height', this.props.height.toString());
    // this.video.setAttribute('src', 'http://127.0.0.1:5500/public/1.mp4');
    this.video.setAttribute('src', 'http://www.runoob.com/try/demo_source/movie.mp4');

    document.documentElement.appendChild(this.video)
  }
  init() {
    const { scene } = this
    const { x, y, width, height } = this.props
    const disy = y + height - this.toolsHeight
    this.progress = new Progress(Object.assign(new Props(), {
      width: width - 40,
      height: 4,
      x: x + 20,
      y: disy + this.toolsHeight / 1.5
    }), this, this.video)
    this.controll = new VideoControll(Object.assign(new Props(), {
      width: width - 40,
      height: 4,
      x: x + 20,
      y: disy + this.toolsHeight / 6
    }), this, this.video)

    // 注册事件
    this.progress.getFrame().forEach(frame => {
      scene.IDS.add(frame.getRgbaId())
      scene.eventSimulator.addListeners(frame.getRgbaId(), frame.getListeners())
    })
    this.controll.getFrame().forEach(frame => {
      scene.IDS.add(frame.getRgbaId())
      scene.eventSimulator.addListeners(frame.getRgbaId(), frame.getListeners())
    })

    this.progress.handleEvent(scene.domElement)
    this.handleEvent()
  }
  handleEvent() {
    this.on(EventNames.click, () => {
      if (this.video.paused || this.video.ended || this.video.seeking || this.video.readyState < this.video.HAVE_FUTURE_DATA) this.video.play()
      else this.video.pause()
    })
    this.on(EventNames.mouseenter, () => {
      clearTimeout(this.timer)
      this.isActive = true
    })
    this.on(EventNames.mouseleave, () => {
      this.timer = setTimeout(() => {
        this.checkActive()
        clearTimeout(this.timer)
      }, 1000);
    })
  }
  checkActive() {
    if (!this.progress.isActive) {
      this.isActive = false
    }
  }
  draw(ctx: CanvasRenderingContext2D, osCtx: OffscreenCanvasRenderingContext2D): void {
    const { x, y, width, height, scaleX, scaleY, lateX, lateY, rotation } = this.props
    const disy = y + height - this.toolsHeight

    this.video.style.transform = `translate(${lateX}px,${lateY}px) scale(${scaleX},${scaleY}) rotate(${rotation}deg)`

    if (this.video.currentTime && this.video.duration) {
      this.progress.progress = this.video.currentTime / this.video.duration
    }

    ctx.save()
    this.transform(ctx)

    ctx.drawImage(this.video, x, y, width, height)
    if (true) {
      ctx.beginPath()
      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)'
      ctx.rect(x, disy, width, this.toolsHeight)
      ctx.fill()
      ctx.closePath()
      this.controll.draw(ctx, osCtx)
      this.progress.draw(ctx, osCtx)
    }
    ctx.restore()

    // 镜像画布
    osCtx.save()

    this.transform(osCtx)
    osCtx.beginPath()
    this.initOptions(osCtx, 2)
    osCtx.rect(x, y, width, height)
    osCtx.fill()
    osCtx.stroke()
    osCtx.closePath()
    if (true)
      this.controll.drawMirror(osCtx)
    this.progress.drawMirror(osCtx)

    osCtx.restore()
  }
}